<template>
<!--
  :event="$route.path.includes(nav.path) ? '' : 'click'"
  判断是否是当前的页面，如果是就取消点击事件，
  为了解决已经在当前页面，但是重复点击会造成重定向失效的问题
 -->
  <div class="dt-footer">
    <ul>
      <router-link
        tag="li"
        :event="$route.path.includes(nav.path) ? '' : 'click'"
        v-for="nav in navs"
        :key="nav.name"
        :to="nav.path"
      >
        {{ nav.meta.title }}
      </router-link>
    </ul>
  </div>
</template>

<script>
import routes from '@/router/routes'
export default {
  name: 'dtfooter',
  data () {
    return {
      navs: []
    }
  },
  created () {
    this.navs = routes.filter(route => {
      return route.meta.isTabbar
    })
  }
}
</script>

<style scoped lang="scss">
.dt-footer{
  border-top: 1px solid #ccc;
  ul {
    display: flex;
    justify-content: space-around;
    height: 55px;
  }
  li {
    line-height: 55px;
  }
  .router-link-exact-active,
  .router-link-active {
    color: #ff6034;
  }
}
</style>
